<!--
 * @Author: bear
 * @Date: 2022-08-02 14:00:31
 * @LastEditors: bear
 * @LastEditTime: 2022-08-03 10:35:28
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div class="home">
    <div>
      <span style="color: #ffffff">{{ copyFont }}</span>
      <el-button type="primary" @click="copyFontBtn">复制文字</el-button>
    </div>
    <br />
    <div>
      <div class="box borderCorner">
        <span style="color: #ffffff">{{ pasteFont }}</span>
      </div>
      <el-button type="primary" @click="pasteFontBtn">粘贴文字</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { clipboard } from "electron";
// 定义要复制的文案变量
const copyFont = ref("觉得有用点点关注撒~~~");
// 定义要粘贴的文案变量
const pasteFont = ref();
// 点击复制文字的按钮
const copyFontBtn = () => {
  // clipboard。writeText 文案
  clipboard.writeText(copyFont.value);
};
// 点击粘贴文字的按钮
const pasteFontBtn = () => {
  pasteFont.value = clipboard.readText();
};
</script>
<style scoped>
@import url("../layout/public/common.css");
.home {
  width: 100%;
  height: 100%;
  background-image: url(../assets/bg-login-city.jpg);
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.home > div {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(16, 37, 57, 0.5);
  border: 1px solid #108ba1;
  padding: 10px 20px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0adfff;
  line-height: 40px;
}
.home > div img {
  width: 40px;
  height: 40px;
}
</style>
